<template>
  <el-card class="collection-header" shadow="never">
    <div class="header-content">
      <!-- 统计信息 -->
      <div class="stats-section">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">催款记录总数</div>
              <div class="stat-value">{{ stats.totalRecords }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">待处理</div>
              <div class="stat-value warning">{{ stats.pendingRecords }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">已完成</div>
              <div class="stat-value success">{{ stats.completedRecords }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">本月新增</div>
              <div class="stat-value">{{ stats.thisMonthRecords }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">成功率</div>
              <div class="stat-value">{{ stats.successRate }}%</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">平均天数</div>
              <div class="stat-value">{{ stats.avgCollectionDays }}天</div>
            </div>
          </el-col>
        </el-row>
      </div>
      
      <!-- 操作按钮 -->
      <div class="actions-section">
        <el-row :gutter="12" class="action-buttons">
          <el-col :span="16">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索客户名称、订单号..."
              clearable
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button 
              type="primary" 
              :icon="Search"
              @click="handleSearch"
            >
              搜索
            </el-button>
          </el-col>
          <el-col :span="4">
            <el-button 
              :icon="Refresh"
              @click="handleRefresh"
            >
              刷新
            </el-button>
          </el-col>
        </el-row>
        
        <div class="toolbar-buttons">
          <el-dropdown @command="handleBatchCommand">
            <el-button>
              批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="export">导出记录</el-dropdown-item>
                <el-dropdown-item command="import">导入记录</el-dropdown-item>
                <el-dropdown-item command="delete" divided>删除记录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          
          <el-button @click="handleSmartFilter">
            <el-icon><Filter /></el-icon>智能过滤
          </el-button>
          
          <el-button @click="handleBatchOperations">
            <el-icon><Operation /></el-icon>批量操作
          </el-button>
          
          <el-button @click="handleImportWizard">
            <el-icon><Upload /></el-icon>导入向导
          </el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search, Refresh, ArrowDown, Filter, Operation, Upload } from '@element-plus/icons-vue'

interface CollectionStats {
  totalRecords: number
  pendingRecords: number
  completedRecords: number
  thisMonthRecords: number
  successRate: number
  avgCollectionDays: number
}

interface Props {
  stats: CollectionStats
  loading: boolean
  capturing: boolean
  selectedRecords: any[]
  viewMode: string
  showAdvancedFilter: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'search'): void
  (e: 'reset'): void
  (e: 'toggle-filter'): void
  (e: 'view-mode-change', mode: string): void
  (e: 'showImportWizard'): void
  (e: 'smart-filter'): void
  (e: 'show-batch-operations'): void
  (e: 'load-records'): void
  (e: 'export-records'): void
  (e: 'handle-smart-capture'): void
}>()

const searchKeyword = ref('')

const handleSearch = () => {
  emit('search')
}

const handleRefresh = () => {
  emit('load-records')
}

const handleBatchCommand = (command: string) => {
  switch (command) {
    case 'export':
      emit('export-records')
      break
    case 'import':
      emit('showImportWizard')
      break
    case 'delete':
      // 处理批量删除
      break
  }
}

const handleSmartFilter = () => {
  emit('smart-filter')
}

const handleBatchOperations = () => {
  emit('show-batch-operations')
}

const handleImportWizard = () => {
  emit('showImportWizard')
}
</script>

<style scoped lang="scss">
.collection-header {
  margin-bottom: 20px;
  
  .header-content {
    .stats-section {
      margin-bottom: 20px;
      
      .stat-item {
        text-align: center;
        padding: 12px 0;
        
        .stat-label {
          font-size: 12px;
          color: #909399;
          margin-bottom: 4px;
        }
        
        .stat-value {
          font-size: 18px;
          font-weight: bold;
          color: #303133;
          
          &.warning {
            color: #e6a23c;
          }
          
          &.success {
            color: #67c23a;
          }
        }
      }
    }
    
    .actions-section {
      .action-buttons {
        margin-bottom: 16px;
      }
      
      .toolbar-buttons {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
    }
  }
}

@media (max-width: 768px) {
  .collection-header {
    .header-content {
      .stats-section {
        .stat-item {
          padding: 8px 0;
          
          .stat-label {
            font-size: 10px;
          }
          
          .stat-value {
            font-size: 14px;
          }
        }
      }
      
      .actions-section {
        .toolbar-buttons {
          gap: 8px;
        }
      }
    }
  }
}
</style>